<template>
	<div class="content">
		<div class="flex borderea box-align-center" style="height: 50px">
			<div class="title flex-1">标准应用反馈</div>
			<div class="flex">
				<div class="tabbj flex box-align-center">
					<span v-for="(value, index) in typelist1" :key="index" :class="{ active: bzactiveyear === index }" @click="bzyearchange(index)">{{
						value
					}}</span>
				</div>

				<div class="tabbj ml10 flex box-align-center">
					<span v-for="(value, index) in typelist" :key="index" :class="{ active: bzactivetype === index }" @click="bztypechange(index)">{{
						value
					}}</span>
				</div>
			</div>
		</div>

		<!-- 图表 -->
		<div v-if="bzactivetype === 0" class="parent1 mt10 flex flex-align-center">
			<div ref="chartRefbzgl" style="width: 100%; height: 100%"></div>
		</div>

		<!-- 表格 -->
		<div v-if="bzactivetype === 1" class="parent1 mt10">
			<DynamicTable :x-legend="bzgltablelegendx" :y-legend="bzgltablelegendy" :values="bzgltablevalues" :title="title" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { min } from 'xe-utils'
import * as echarts from 'echarts'
import moment from 'moment'
import DynamicTable from './DynamicTable.vue'
import { countCurveStandardReplyApi, countFormStandardReplyApi } from '@/api/statistica'
const bzactivetype = ref(0)
const bzactiveyear = ref(0)
const typelist = ref(['图表', '表格'])
const currentYear = moment().year()
const bzyearlist = Array.from({ length: 4 }, (_, index) => currentYear - index)
const loading = ref(false)
const chartRefbzgl = ref(null)
let chartInstancebzgl: echarts.ECharts | null = null
const typelist1 = ref(['标准点击量', '标准下载量', '标准咨询反馈率'])
// 示例数据
const bzglchartsdata = {
	categories: [],
	series: []
}
const title = ref('')
const bzgltablevalues = ref([])
const bzgltablelegendx = ref([])
const bzgltablelegendy = ref([])
const biaozhunform = ref({
	abolishedStandards: '',
	currentStandards: '',
	draftingStandards: '',
	newDraftingStandards: '',
	revisingDraftingStandards: ''
})

// 初始化图表
const initChart = () => {
	if (!chartRefbzgl.value) {
		return
	}

	chartInstancebzgl = echarts.init(chartRefbzgl.value)
	let option = {}

	if (bzactiveyear.value == 2) {
		option = {
			title: {
				text: '',
				left: 'center'
			},
			tooltip: {
				trigger: 'axis',
				formatter: params => {
					let result = params[0].axisValue + '<br/>'
					params.forEach(param => {
						result += `${param.seriesName}: ${(param.value * 100).toFixed(2)}%<br/>` // 提示框显示百分比
					})
					return result
				}
			},
			legend: {
				data: info.value.labels.slice(0, 1), // 只显示第一条数据的图例
				bottom: 10
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '14%',
				top: '12%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: info.value.xlegend,
				axisLabel: {
					interval: 0,
					rotate: 30 // 如果标签过长可以旋转
				}
			},
			yAxis: {
				type: 'value',
				min: 'dataMin',
				max: 'dataMax',
				axisLabel: {
					formatter: '{value}%' // Y轴标签显示百分比
				}
			},
			series: [
				{
					name: info.value.labels[0], // 只显示第一条数据的名称
					type: 'line',
					smooth: true,
					data: info.value.values[0].map(value => value), // 转换为百分比，保留两位小数
					itemStyle: {
						color: '#5470C6' // 固定颜色
					},
					emphasis: {
						focus: 'series' // 高亮时只显示当前系列
					},
					label: {
						show: true, // 显示数据标签
						formatter: params => (params.value === '0.00' ? '' : `${params.value}%`), // 零值不显示标签
						position: 'top' // 标签位置
					}
				}
			]
		}
	} else {
		option = {
			title: {
				text: '',
				left: 'center'
			},
			tooltip: {
				trigger: 'axis',
				formatter: params => {
					let result = params[0].axisValue + '<br/>'
					params.forEach(param => {
						result += `${param.seriesName}: ${param.value}<br/>`
					})
					return result
				}
			},
			legend: {
				data: info.value.labels,
				bottom: 10
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '14%',
				top: '8%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: info.value.xlegend,
				axisLabel: {
					interval: 0,
					rotate: 30 // 如果标签过长可以旋转
				}
			},
			yAxis: {
				type: 'value',
				min: 'dataMin',
				max: 'dataMax'
			},
			series: info.value.labels.map((year, index) => ({
				name: year,
				type: 'line',
				smooth: true,
				data: info.value.values[index],
				itemStyle: {
					color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'][index % 5] // 不同颜色
				},
				emphasis: {
					focus: 'series' // 高亮时只显示当前系列
				}
			}))
		}
	}

	chartInstancebzgl.clear()
	chartInstancebzgl.setOption(option)
}

// 响应式调整图表大小
const resizeChart = () => {
	chartInstancebzgl?.resize()
}
const info = ref(null)
onMounted(() => {
	window.addEventListener('resize', resizeChart)

	countCurveStandardReplyApi(0).then(res => {
		info.value = res.data
	})
	setTimeout(() => {
		nextTick(() => {
			initChart()
		})
	}, 800)
})

// 转换函数
const transformToSeries = (legends, values) => {
	return legends.map((legend, legendIndex) => ({
		name: legend,
		data: values.map(item => item.value[legendIndex])
	}))
}
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart)
	chartInstancebzgl?.dispose()
})

const bzyearchange = (index: number) => {
	bzactiveyear.value = index
	if (bzactivetype.value === 0) {
		countCurveStandardReplyApi(index).then(res => {
			info.value = res.data
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		countFormStandardReplyApi(index).then(res => {
			bzgltablelegendx.value = res.data.ylegend
			bzgltablelegendy.value = res.data.xlegend
			bzgltablevalues.value = res.data.values
		})
	}
}
const bztypechange = (index: number) => {
	bzactivetype.value = index
	if (index === 0) {
		countCurveStandardReplyApi(bzactiveyear.value).then(res => {
			bzglchartsdata.categories = res.data.xlegend
			bzglchartsdata.series = transformToSeries(res.data.legends, res.data.values)
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		countFormStandardReplyApi(bzactiveyear.value).then(res => {
			bzgltablelegendx.value = res.data.ylegend
			bzgltablelegendy.value = res.data.xlegend
			bzgltablevalues.value = res.data.values
		})
	}
}
</script>

<style lang="scss" scoped>
.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 三列等宽 */
	gap: 20px;
	/* 块之间的间距 */
	width: 100%;
}

.block {
	padding: 10px;
	background: #f0f0f0;
	border-radius: 8px;
	color: #666;
	font-size: 13px;

	span {
		font-size: 15px;
		font-weight: 600;
		color: #333;
	}
}

.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.tabbj {
	background-color: #f5f6fa;

	border-radius: 3px;
	color: #333;
	padding: 4px 0px;

	span {
		padding: 3px 5px;
		border-radius: 3px;
		margin: 0 3px;

		cursor: pointer;
		transition: all 0.3s ease;
		/* 添加过渡动画 */
	}

	.active {
		background-color: #fff;

		/*transform: translateY(-3px);*/
		color: #1491ff;
		/* 轻微上浮效果 */

		/* 阴影动画 */
	}
}

.paddingbottom10 {
	padding-bottom: 10px;
}

.borderea {
	border-bottom: solid 1px #ebeef5;
}

.parent {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */
}

.parent1 {
	overflow-x: auto;

	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */

	&::-webkit-scrollbar {
		display: none;
	}
}

.child {
	flex: 0 1 calc(50% - 10px);
	/* 撑满父元素宽度的一半，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	box-sizing: border-box;
	/* 包含 padding 和 border */
	padding: 15px 10px;
	background: #fafafc;
	border-radius: 5px;
	display: flex;
}

.parenttitle {
	font-size: 14px;
	font-weight: 500;
	color: #666;
}

.parennumber {
	font-size: 12px;

	color: #333;

	span {
		font-size: 15px;
		font-weight: 600;
	}
}

/* font-family: Arial, sans-serif; */
</style>
